<template>
    <div id="main">
        <mavon-editor
        :editable=editable
        :subfield="subfield"
        :toolbars="toolbars"
        ref="md"
        @change="changeVal"
        v-model="value"
        />
    </div>
</template>

<script>
    export default {
        props:['editable'],
        data() {
            return {
                value: "",
                renders: "",
                subfield: false,
                //简约工具栏-用于有实验窗口的编辑器，自行覆盖

                // toolbars: {
                //   bold: true, // 粗体
                //   italic: true, // 斜体
                //   header: true, // 标题
                //   //underline: true, // 下划线
                //   //strikethrough: true, // 中划线
                //   //mark: true, // 标记
                //   //superscript: true, // 上角标
                //   //subscript: true, // 下角标
                //   quote: true, // 引用
                //   ol: true, // 有序列表
                //   ul: true, // 无序列表
                //   //link: true, // 链接
                //   imagelink: true, // 图片链接
                //   code: true, // code
                //   table: true, // 表格
                //   //fullscreen: true, // 全屏编辑
                //   //readmodel: true, // 沉浸式阅读
                //   //htmlcode: true, // 展示html源码
                //   help: true, // 帮助
                //   /* 1.3.5 */
                //   //undo: true, // 上一步
                //   //redo: true, // 下一步
                //   //trash: true, // 清空
                //   //save: true, // 保存（触发events中的save事件）
                //   /* 1.4.2 */
                //   //navigation: true, // 导航目录
                //   /* 2.1.8 */
                //   alignleft: true, // 左对齐
                //   aligncenter: true, // 居中
                //   alignright: true, // 右对齐
                //   /* 2.2.1 */
                //   //subfield: true, // 单双栏模式
                //   preview: true // 预览
                // },
                toolbars: {
                    //默认工具栏
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    //mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    //link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    //readmodel: true, // 沉浸式阅读
                    //htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    //trash: true, // 清空
                    //save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    //navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    //subfield: true, // 单双栏模式
                    preview: true // 预览
                }
            };
        },
        methods: {
            changeVal(val, renders) {
                this.renders = renders;
                //console.log(val);
                //console.log(renders);
                return val;
            },
            getContent() {
                return this.value;
            }
        }
    }
</script>

<style>
    #main {
    /* height: 200px;
        width:500px; */
    }
</style>
